<!--
 * @Author: 王坤
 * @LastEditors: 王坤
 * @Description: 滑块
-->
<template>
  <div class="lc-slider">
    <label v-if="showRangeText" class="lc-slider-text">{{ min }}</label>
    <el-slider v-model="sliderNumber" :min="min" :max="max" :step="step" v-bind="$attrs" />
    <label v-if="showRangeText" class="lc-slider-text">{{ max }}</label>
  </div>
</template>
<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: 0
  },
  // 显示范围
  showRangeText: {
    type: Boolean,
    default: true
  },
  // 步长
  step: {
    type: Number,
    default: 1
  },
  max: {
    type: Number,
    default: 100
  },
  min: {
    type: Number,
    default: 0
  }
});
const emits = defineEmits(['update:modelValue']);
const formValue = ref(props.modelValue);
const sliderNumber = computed({
  get: () => formValue.value,
  set: (val) => (formValue.value = val)
});
watch(formValue, (val) => {
  emits('update:modelValue', val);
});
</script>
<style lang="scss">
@use '@/assets/styles/element-ui.scss' as eu;
.lc-slider {
  display: flex;
  align-items: center;
  @if eu.$width == 'fullWidth' {
    width: 100%;
  } @else if eu.$width == 'mini' {
    width: 60px;
  } @else {
    width: #{eu.$width};
  }
  .el-slider {
    flex: 1;
    margin: 0 10px;
    .el-slider__button-wrapper {
      width: 32px;
      height: 32px;
      top: -13px;
    }
    .el-slider__runway {
      margin: 13px 0;
    }
  }
  &-text {
    padding: 0 5px;
  }
}
</style>
